<template>
    <div class="w-full h-full flex flex-col">
        <titleBar :showback="true">排片列表</titleBar>
        <div class="content-box flex-1 overflow-auto">
            <!-- 轮播图的盒子 -->
            <div class="swiper-box h-[150px] bg-gradient-to-tr from-gray-500 to-gray-900 py-[5px]">
                <Swiper class="h-full" 
                :slides-per-view="3" 
                :space-between="5" 
                :centered-slides="true">
                    <SwiperSlide v-for="item in 10" :key="item">
                        <img :src="baseURL+movieInfo.movie_pc" class="w-full h-full" alt="">
                    </SwiperSlide>
                </Swiper>
            </div>
            <!-- 电影名称 -->
            <ul class="flex flex-col items-center leading-6 py-[10px]">
                <li class=" font-bold flex items-end" >
                    <div>{{movieInfo.movie_name}}</div>
                    <div class=" text-warningColor ml-[5px]">{{movieInfo.movie_score}}<span class=" text-[12px]">分</span></div>
                </li>
                <li class=" text-gray-600 text-[12px]">
                    {{movieInfo.duration}}分钟|{{movieInfo.tags}}|{{movieInfo.role}}
                </li>
            </ul>
            <!-- 下载的排片列表 -->
            <ul class=" px-[10px]">
                <li class=" flex items-center border-0 border-b border-gray-300 border-dashed h-[70px]" 
                v-for="item in playInfoList" :key="item.id">
                    <div class=" w-[80px] text-[14px]">n</div>
                    <div class="w-[70px] text-[12px] text-gray-500">{{item.hallInfo.tags}}</div>
                    <div class=" flex-1 text-warningColor  flex justify-center">￥{{item.price}}</div>
                    <div class="w-[70px]">
                        <button type="button" class="btn-buy" @click="toChooseSite(item.id)">购票</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
import 'swiper/css';
import API from "../utils/API/index.js";
let baseURL = ref("http://www.softeem.xin:9999");
const route = useRoute();
const router =useRouter();

//console.log(rout.query.id)可以获取电影的id
//根据这个id请求服务器的端口，获取排片的信息
//定义排片列表的变量
const  playInfoList=ref([])
//定义存放电影信息的变量
const movieInfo=ref({})
const queryData =()=>{
    API.planInfo.getPlanById(route.query.id).then(result=>{
         playInfoList.value=result;
         movieInfo.value=result[0].movieInfo
    })
};
queryData();
//去选座购票的页面
const toChooseSite =(id) =>{
     router.push({
        name:"chooseSite",
        query:{
            id:id 
        }
     })
}

</script>
<style scoped lang="scss">
.btn-buy {
    @apply border border-solid border-primaryColor bg-white text-[12px] text-primaryColor w-[50px] h-[27px] rounded-[13px];
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
    transform: scale(1);
}
</style>